import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Picker from 'react-native-picker';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import Base from '../../utils/Base';
import TrendHighchart from './TrendHighchart';
import Modalext from '../Public/ModalExt';
import { fetchEveryDay } from '../../actions/ImportOverviewAction';
import FilterDate from '../../containers/FilterDateContainer';


const { width } = Base.window;
const trendTitle = '人数';
let dataTrend = [];
let dealerCar = [];        // 车系
let dealerCarNew = [];   // 车系
let clickBtn = 1;
let carIds = '';            // 车系id
let carType = '全部车系';
// let  channelItemId= 0;     // 渠道标识
let all = 1;
let app = 0;
let vr = 0;
let led = 0;
let h5 = 0;
let web = 0;
let drive = 0;
const styleRed = { // 按钮红色
  borderWidth: 0,
};
const styleWhite = { // 按钮白色
  // borderWidth: PxToDp(1),
  // borderStyle: 'solid',
  // borderColor: '#e2e3e4',

};
const styleText = {
  fontFamily: FontFamilys(),
  fontSize: PxToDp(14),
  color: '#418cff',
  backgroundColor: 'transparent',
};
const styleTextSelect = {
  fontFamily: FontFamilys(),
  fontSize: PxToDp(14),
  color: '#c4d2ff',
  backgroundColor: 'transparent',
};
const newRedImg = require('../../img/home/dTimePress.png');
const newImg = require('../../img/home/dTimeNormal.png');
const carRedImg = require('../../img/home/dCarPress.png');
const carImg = require('../../img/home/dCarNormal.png');
const voiceRedImg = require('../../img/home/dVoicePress.png');
const voiceImg = require('../../img/home/dVoiceNarmal.png');
const onlineRedImg = require('../../img/home/dMessgePress.png');
const onlineImg = require('../../img/home/dMessgeNarmal.png');
const driverRedImg = require('../../img/home/dDrivePress.png');
const driverImg = require('../../img/home/dDriveNormal.png');

const channerList = [
  {
    channel: 0,
    name: '全部',
    select: 1,
    id: 1,
    bgColor: '#458fff',
  },
  {
    channel: 1,
    name: '移动数字经销店',
    select: 0,
    id: 2,
    bgColor: '#efefef',
    // bgColor: '#0cf1d9',
  },
  {
    channel: 2,
    name: 'AR数字展厅',
    select: 0,
    id: 3,
    bgColor: '#efefef',
    // bgColor: '#f16d0c',
  },
  {
    channel: 3,
    name: '触控可视化',
    select: 0,
    id: 4,
    bgColor: '#efefef',
    // bgColor: '#2ac7ff',
  },
  {
    channel: 4,
    name: '微车商',
    select: 0,
    id: 5,
    bgColor: '#efefef',
    // bgColor: '#4be789',
  },
  {
    channel: 5,
    name: '官网',
    select: 0,
    id: 6,
    bgColor: '#efefef',
    // bgColor: '#535356',
  },
  {
    channel: 6,
    name: '虚拟驾驶模拟',
    select: 0,
    id: 7,
    bgColor: '#efefef',
    // bgColor: '#f1c10c',
  },
];
let dataCar = [];

class EverydayTrend extends Component {

  constructor(props) {
    super(props);
    this.state = {
      ModelshowChannel: false,
      ModelshowCar: false,
      noRender: true,
      regisgCustomer: '#7b6aff',
      regisgCustomer2: '#4cbbff',
      lookCarCustomer: '#fff',
      lookCarCustomer2: '#fff',
      voiceCustomer: '#fff',
      voiceCustomer2: '#fff',
      callCustomer: '#fff',
      callCustomer2: '#fff',
      makeCustomer: '#fff',
      makeCustomer2: '#fff',
      regisgText: styleTextSelect,
      lookCarText: styleText,
      voiceText: styleText,
      callText: styleText,
      makeText: styleText,
      voiceImg,
      driveImg: driverImg,
      newImg: newRedImg,
      carImg,
      onlineImg,
      selectChannelId: 1,
      selectCarItem: '全部车系',
      selectCarItemId: '',
      selectCarItemName: '全部车系', // 点击完成才变化标题
      btn1Bg: styleRed,
      btn2Bg: styleWhite,
      btn3Bg: styleWhite,
      btn4Bg: styleWhite,
      btn5Bg: styleWhite,
    };
  }
  _setModalVisibleChannel(visible) {
    this.setState(() => ({
      ModelshowChannel: visible,
    }));
  }
  _setModalVisible(visible) {
    this.setState(() => ({
      ModelshowCar: visible,
    }));
  }

  _showDatePicker() {
    dataCar = [];
    if (dealerCarNew && dealerCarNew.length > 0) {
      dealerCarNew.map((item) => {
        dataCar.push(item.name);
      });
    }
    Picker.init({
      pickerData: dataCar,
      selectedValue: [this.state.selectCarItemName],
      pickerConfirmBtnText: '确认',
      pickerCancelBtnText: '取消',
      pickerTitleText: '选择车系',
      pickerBg: [255, 255, 255],
      pickerConfirmBtnColor: [65, 140, 255, 1],
      pickerCancelBtnColor: [139, 140, 142, 1],
      pickerTitleColor: [18, 18, 18, 1],
      pickerToolBarFontSize: 18,
      pickerFontSize: 15,
      onPickerConfirm: (data) => {
        dealerCarNew.map((item) => {
          if (item.name === data[0]) {
            carIds = item.carId;
            carType = item.name;
            this.setState({ selectCarItem: item.name });
            this.setState({ selectCarItemName: item.name });
            this.setState({ selectCarItemId: item.carId });
            this.props.dispatch(fetchEveryDay(this.props.startTime, this.props.endTime,
            clickBtn, all, app, vr, led, h5, web, drive, clickBtn === 1 ? '' : item.carId));
          }
        });
      },
      onPickerCancel: (data) => {
        console.log(data);
      },
      onPickerSelect: (data) => {
        console.log(data);
      },
    });
    Picker.show();
  }

  // 点击某个渠道
  channelMsg(channel, select, id) {
    // channelItemId = channel;
    this.setState({ selectChannelId: id });
    if (select === 1) {
      channerList[channel].select = 0;
    } else {
      channerList[channel].select = 1;
    }
    all = channerList[0].select;
    app = channerList[1].select;
    vr = channerList[2].select;
    led = channerList[3].select;
    h5 = channerList[4].select;
    web = channerList[5].select;
    drive = channerList[6].select;
    this.props.dispatch(fetchEveryDay(this.props.startTime, this.props.endTime,
      clickBtn, all, app, vr, led, h5, web, drive, clickBtn === 1 ? '' : this.state.selectCarItemId));
  }

  // 完成
  Commit(flag) {
    this.setState({ selectCarItemName: carType });
    if (flag === 0) {
      this._setModalVisibleChannel(false);
      // channelItemName = channelItem;
      all = channerList[0].select;
      app = channerList[1].select;
      vr = channerList[2].select;
      led = channerList[3].select;
      h5 = channerList[4].select;
      web = channerList[5].select;
      drive = channerList[6].select;
      this.props.dispatch(fetchEveryDay(this.props.startTime, this.props.endTime,
        clickBtn, all, app, vr, led, h5, web, drive, clickBtn === 1 ? '' : this.state.selectCarItemId));
    } else if (flag === 1) {
      // this._setModalVisible(false);
      this.props.dispatch(fetchEveryDay(this.props.startTime, this.props.endTime,
        clickBtn, all, app, vr, led, h5, web, drive, clickBtn === 1 ? '' : this.state.selectCarItemId));
    }
  }

  _goToFilterDate() {
    if (clickBtn === 1) {
      carIds = '';
    } else {
      carIds = this.state.selectCarItemId;
    }
    this.props.screenProps.navigator.push({
      component: FilterDate,
      passProps: { clickBtn, all, app, vr, led, h5, web, drive, carIds },
    });
  }

  // 五个按钮切换
  newCustomerBtn(flag) {
    switch (flag) {
      case 1:
        clickBtn = 1;
        this.setState(() => ({
          regisgCustomer: '#7b6aff',
          regisgCustomer2: '#4cbbff',
          btn1Bg: styleRed,
          lookCarCustomer: '#fff',
          lookCarCustomer2: '#fff',
          btn2Bg: styleWhite,
          btn3Bg: styleWhite,
          voiceCustomer: '#fff',
          voiceCustomer2: '#fff',
          btn4Bg: styleWhite,
          callCustomer: '#fff',
          callCustomer2: '#fff',
          btn5Bg: styleWhite,
          makeCustomer: '#fff',
          makeCustomer2: '#fff',
          regisgText: styleTextSelect,
          lookCarText: styleText,
          voiceText: styleText,
          callText: styleText,
          makeText: styleText,
          voiceImg,
          driveImg: driverImg,
          newImg: newRedImg,
          carImg,
          onlineImg,
        }));
        break;
      case 2:
        clickBtn = 2;
        this.setState(() => ({
          regisgCustomer: '#fff',
          regisgCustomer2: '#fff',
          btn1Bg: styleWhite,
          lookCarCustomer: '#7b6aff',
          lookCarCustomer2: '#4cbbff',
          btn2Bg: styleRed,
          btn3Bg: styleWhite,
          voiceCustomer: '#fff',
          voiceCustomer2: '#fff',
          btn4Bg: styleWhite,
          callCustomer: '#fff',
          callCustomer2: '#fff',
          btn5Bg: styleWhite,
          makeCustomer: '#fff',
          makeCustomer2: '#fff',
          regisgText: styleText,
          lookCarText: styleTextSelect,
          voiceText: styleText,
          callText: styleText,
          makeText: styleText,
          voiceImg,
          driveImg: driverImg,
          newImg,
          carImg: carRedImg,
          onlineImg,
        }));
        break;
      case 3:
        clickBtn = 3;
        this.setState(() => ({
          regisgCustomer: '#fff',
          regisgCustomer2: '#fff',
          btn1Bg: styleWhite,
          lookCarCustomer: '#fff',
          lookCarCustomer2: '#fff',
          btn2Bg: styleWhite,
          btn3Bg: styleRed,
          voiceCustomer: '#7b6aff',
          voiceCustomer2: '#4cbbff',
          btn4Bg: styleWhite,
          callCustomer: '#fff',
          callCustomer2: '#fff',
          btn5Bg: styleWhite,
          makeCustomer: '#fff',
          makeCustomer2: '#fff',
          regisgText: styleText,
          lookCarText: styleText,
          voiceText: styleTextSelect,
          callText: styleText,
          makeText: styleText,
          voiceImg: voiceRedImg,
          driveImg: driverImg,
          newImg,
          carImg,
          onlineImg,
        }));
        break;
      case 4:
        clickBtn = 4;
        this.setState(() => ({
          btn1Bg: styleWhite,
          btn2Bg: styleWhite,
          btn3Bg: styleWhite,
          btn4Bg: styleRed,
          btn5Bg: styleWhite,
          regisgCustomer: '#fff',
          regisgCustomer2: '#fff',
          lookCarCustomer: '#fff',
          lookCarCustomer2: '#fff',
          voiceCustomer: '#fff',
          voiceCustomer2: '#fff',
          callCustomer: '#7b6aff',
          callCustomer2: '#4cbbff',
          makeCustomer: '#fff',
          makeCustomer2: '#fff',
          regisgText: styleText,
          lookCarText: styleText,
          voiceText: styleText,
          callText: styleTextSelect,
          makeText: styleText,
          voiceImg,
          driveImg: driverImg,
          newImg,
          carImg,
          onlineImg: onlineRedImg,
        }));
        break;
      case 5:
        clickBtn = 5;
        this.setState(() => ({
          regisgCustomer: '#fff',
          regisgCustomer2: '#fff',
          btn1Bg: styleWhite,
          lookCarCustomer: '#fff',
          lookCarCustomer2: '#fff',
          btn2Bg: styleWhite,
          btn3Bg: styleWhite,
          voiceCustomer: '#fff',
          voiceCustomer2: '#fff',
          btn4Bg: styleWhite,
          callCustomer: '#fff',
          callCustomer2: '#fff',
          btn5Bg: styleRed,
          makeCustomer: '#7b6aff',
          makeCustomer2: '#4cbbff',
          regisgText: styleText,
          lookCarText: styleText,
          voiceText: styleText,
          callText: styleText,
          makeText: styleTextSelect,
          voiceImg,
          driveImg: driverRedImg,
          newImg,
          carImg,
          onlineImg,
        }));
        break;
      default:
        return;
    }
    this.props.dispatch(fetchEveryDay(this.props.startTime, this.props.endTime, clickBtn, all, app,
      vr, led, h5, web, drive, clickBtn === 1 ? '' : this.state.selectCarItemId));
  }

  // 取消车系
  _cancleCar() {
    this._setModalVisible(false);
    this.setState({ selectCarItem: this.state.selectCarItemName });
  }

  renderData() {
    const { importOVerviewData } = this.props;
    const { EveryDayData } = this.props;
    if (importOVerviewData) {
      if (EveryDayData && EveryDayData.day_trend) {
        dataTrend = EveryDayData.day_trend;
      } else {
        dataTrend = importOVerviewData.day_trend;
      }
      dealerCar = importOVerviewData.car_list;
      if (dealerCar && dealerCar.length > 0) {
        let car = { id: '', num: 0, name: '', carId: '' }; // 车系偏好对象
        dealerCarNew = [];
        dealerCar.map((data, i) => {
          carIds = data[2];
          car = { id: '', name: '', carId: '' }; // 车系偏好对象
          car.id = `${i}everyday`;
          car.name = data[1];
          car.carId = data[2];
          dealerCarNew.push(car);
        });
      }
    }
  }
  render() {
    this.renderData();
    return (
      <ScrollView>
        <View style={[style.wrapper, style.flex]}>
          <View>
            <View style={[style.pageIndex, style.row]}>
              <Text style={style.pageText}>{clickBtn}</Text>
              <Text style={style.titlePageR}>/5</Text>
            </View>

            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={style.topBtn}>
                <View style={[style.row]}>
                  <TouchableOpacity
                    style={style.leftLiner}
                    onPress={() => this.newCustomerBtn(1)}
                  >
                    <LinearGradient
                      style={[style.btn1Bg, style.linerTouch]}
                      colors={[this.state.regisgCustomer, this.state.regisgCustomer2]}
                      start={{ x: 0, y: 1 }}
                      end={{ x: 1, y: 1 }}
                    >
                      <Image source={this.state.newImg} />
                      <Text style={this.state.regisgText}>新增注册客户数</Text>
                    </LinearGradient>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={style.leftLiner}
                    onPress={() => this.newCustomerBtn(2)}
                  >
                    <LinearGradient
                      style={[style.btn2Bg, style.linerTouch]}
                      colors={[this.state.lookCarCustomer, this.state.lookCarCustomer2]}
                      start={{ x: 0, y: 1 }}
                      end={{ x: 1, y: 1 }}
                    >
                      <Image source={this.state.carImg} />
                      <Text style={this.state.lookCarText}>当日看车人数</Text>
                    </LinearGradient>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={style.leftLiner}
                    onPress={() => this.newCustomerBtn(3)}
                  >
                    <LinearGradient
                      style={[style.btn3Bg, style.linerTouch]}
                      colors={[this.state.voiceCustomer, this.state.voiceCustomer2]}
                      start={{ x: 0, y: 1 }}
                      end={{ x: 1, y: 1 }}
                    >
                      <Image source={this.state.voiceImg} />
                      <Text style={this.state.voiceText}>语音留言人数</Text>
                    </LinearGradient>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={style.leftLiner}
                    onPress={() => this.newCustomerBtn(4)}
                  >
                    <LinearGradient
                      style={[style.btn4Bg, style.linerTouch]}
                      colors={[this.state.callCustomer, this.state.callCustomer2]}
                      start={{ x: 0, y: 1 }}
                      end={{ x: 1, y: 1 }}
                    >
                      <Image source={this.state.onlineImg} />
                      <Text style={this.state.callText}>在线通话人数</Text>
                    </LinearGradient>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={style.leftLiner}
                    onPress={() => this.newCustomerBtn(5)}
                  >
                    <LinearGradient
                      style={[style.btn5Bg, style.linerTouch]}
                      colors={[this.state.makeCustomer, this.state.makeCustomer2]}
                      start={{ x: 0, y: 1 }}
                      end={{ x: 1, y: 1 }}
                    >
                      <Image style={style.colect} source={this.state.driveImg} />
                      <Text style={this.state.makeText}>预约试驾人数</Text>
                    </LinearGradient>
                  </TouchableOpacity>
                </View>

              </View>
            </ScrollView>

          </View>


          <View style={[style.row, style.selectView]}>
            {clickBtn !== 1
            ?
              <TouchableOpacity
                style={[style.flex, style.row, style.titleL]}
                onPress={() => this._showDatePicker()}
              >
                <Text
                  style={[style.fontSize12, style.darkGray, style.Regular, style.carName]}
                  numberOfLines={1}
                >
                  {this.state.selectCarItemName}
                </Text>
                <Image style={style.trigleIcon} source={require('../../img/home/daTriangle.png')} />
              </TouchableOpacity>
            :
              <TouchableOpacity style={style.flex} />
            }

            <TouchableOpacity
              style={[style.flex, style.row, style.titleR]}
              onPress={() => this._goToFilterDate()}
            >
              <Text style={[style.fontSize12, style.darkGray, style.Regular]}>筛选日期</Text>
              <Image style={style.trigleIcon} source={require('../../img/home/daTriangle.png')} />
            </TouchableOpacity>
          </View>
          <View style={style.hLine} />
          <View style={[style.trend]}>
            <Text style={[style.trendTitle]}>
              {trendTitle}
            </Text>
            <TrendHighchart
              navigator={this.props.screenProps}
              dataTrend={dataTrend}
            />
            <View style={[style.row, style.lineView]}>
              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(0, channerList[0].select, 1)}
              >

                {
                  channerList[0].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#458fff' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#458fff' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>

                }
                <Text style={style.colorName}>全部</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(5, channerList[5].select, 6)}
              >
                {
                  channerList[5].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#535356' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#535356' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>
                }

                <Text style={style.colorName}>官网</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(4, channerList[4].select, 6)}
              >
                {
                  channerList[4].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#4be789' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#4be789' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>
                }

                <Text style={style.colorName}>微车商</Text>
              </TouchableOpacity>


            </View>

            <View style={[style.row, style.lineView, style.cicleTwoView]}>
              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(1, channerList[1].select, 2)}
              >
                {
                  channerList[1].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#0cf1d9' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#0cf1d9' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>

                }
                <Text style={style.colorName}>移动数字经销店</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(2, channerList[2].select, 3)}
              >
                {
                  channerList[2].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#f16d0c' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#f16d0c' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>

                }

                <Text style={style.colorName}>AR数字展厅</Text>
              </TouchableOpacity>
            </View>

            <View style={[style.row, style.lineView, style.cicleTwoView]}>
              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(3, channerList[3].select, 4)}
              >
                {
                  channerList[3].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#2ac7ff' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#2ac7ff' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>
                }

                <Text style={style.colorName}>触控可视化</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[style.row, style.flex, style.cicleView]}
                onPress={() => this.channelMsg(6, channerList[6].select, 7)}
              >
                {
                  channerList[6].select
                  ?
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#f1c10c' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#f1c10c' }]} />
                    </View>
                  :
                    <View>
                      <View style={[style.cicle, { backgroundColor: '#efefef' }]} />
                      <View style={[style.cicleLine, { backgroundColor: '#efefef' }]} />
                    </View>
                }

                <Text style={style.colorName}>虚拟驾驶模拟</Text>
              </TouchableOpacity>


            </View>
          </View>
          <View style={style.hLine} />
          <Modalext
            onRequestClose={() => this._setModalVisibleChannel(false)}
            animationType={'slide'}
            transparent
            visible={this.state.ModelshowChannel}
            onPress={() => this._setModalVisibleChannel(false)}
          >
            <View style={style.modal}>
              <View style={[style.modalTop, style.center]} >
                <TouchableOpacity
                  style={[style.flex, style.center, style.modalTitle]}
                  onPress={() => this._setModalVisibleChannel(false)}
                >
                  <Text>取消</Text>
                </TouchableOpacity>
                <Text style={style.flex}>选择客户渠道</Text>
                <TouchableOpacity
                  style={[style.flex, style.center, style.modalTitle]}
                  onPress={() => this.Commit(0)}
                >
                  <Text>完成</Text>
                </TouchableOpacity>
              </View>
              <ScrollView>
                {channerList.map(data => (
                  <TouchableOpacity
                    key={data.channel}
                    onPress={() => this.channelMsg(data.channel, data.select, data.id)}
                  >
                    <View style={[style.modalAll, style.row]}>
                      <Text style={style.channelName}>{data.name}</Text>
                      {
                      this.state.selectChannelId && data.select
                      ?
                        <Image source={require('../../img/home/hYes.png')} />
                      :
                        <Text style={{ marginLeft: 12 }} />
                    }
                    </View>

                    <View style={style.line} />
                  </TouchableOpacity>
              ))}
              </ScrollView>
            </View>
          </Modalext>
        </View>
      </ScrollView>
    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    backgroundColor: '#F9F9F9',
    paddingBottom: PxToDp(20),
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  darkGray: {
    color: '#666666',
  },
  fontSize12: {
    fontSize: PxToDp(12),
  },
  Regular: {
    fontFamily: FontFamilys(),
  },
  line: {
    height: PxToDp(1),
    backgroundColor: '#DDDDDD',
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleL: {
    paddingLeft: PxToDp(20),
  },
  titleR: {
    justifyContent: 'flex-end',
    paddingRight: PxToDp(20),
  },
  trend: {
    backgroundColor: '#fff',
    paddingTop: PxToDp(20),
    paddingLeft: PxToDp(10),
    paddingBottom: PxToDp(34),
    paddingRight: PxToDp(10),
    width: '100%',
  },
  trendTitle: {
    color: '#121212',
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
    marginLeft: PxToDp(10),
    marginBottom: PxToDp(20),
  },
  modal: {
    height: PxToDp(200),
    backgroundColor: '#fff',
  },
  modalTop: {
    width,
    height: PxToDp(44),
    backgroundColor: '#F8F8FB',
    flexDirection: 'row',
  },
  modalTitle: {
    height: PxToDp(44),
    alignItems: 'center',
  },
  modalAll: {
    height: PxToDp(44),
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: PxToDp(18),
  },
  colect: {
    marginLeft: PxToDp(9),
  },
  channelName: {
    width: PxToDp(120),
  },
  linerTouch: {
    alignItems: 'center',
    width: PxToDp(132),
    paddingTop: PxToDp(12),
    paddingBottom: PxToDp(16),
    borderColor: '#e2e3e4',
    borderStyle: 'solid',
    borderWidth: 1,
  },
  leftLiner: {
    marginRight: PxToDp(10),
  },
  topBtn: {
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  trigleIcon: {
    marginLeft: PxToDp(9),
    marginTop: PxToDp(6),
  },
  selectView: {
    paddingTop: PxToDp(20),
    paddingBottom: PxToDp(12),
  },
  cicle: {
    height: PxToDp(7),
    width: PxToDp(7),
    backgroundColor: 'red',
    borderRadius: PxToDp(4),
    marginLeft: PxToDp(4),
  },
  cicleLine: {
    height: PxToDp(1),
    width: PxToDp(16),
    backgroundColor: 'blue',
    marginTop: PxToDp(-4),
  },
  lineView: {
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  colorName: {
    color: '#121212',
    fontWeight: 'bold',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    marginLeft: PxToDp(8),
  },
  cicleView: {
    alignItems: 'center',
  },
  cicleTwoView: {
    marginTop: PxToDp(10),
  },
  carName: {
    width: PxToDp(70),
    maxWidth: PxToDp(70),
  },
  pageIndex: {
    width: '100%',
    justifyContent: 'flex-end',
    paddingRight: PxToDp(20),
    paddingBottom: PxToDp(4),
  },
  pageText: {
    color: '#121212',
    fontSize: PxToDp(20),
    fontFamily: FontFamilys(),
  },
  titlePageR: {
    color: '#8b8c8e',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    marginTop: PxToDp(8),
  },
  hLine: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e4e4e4',
  },
});
export default EverydayTrend;
